<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'车辆跨线停车识别预警'"/>
        <div class="dy-table">
          <table class="pd-table">
            <thead>
              <tr>
                <th>车牌</th>
                <th>事件类型</th>
                <th>时间</th>
                <th style="width:10%">相机</th>
                <th style="width:10%">广播</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableDatas">
                <td>{{item.platenumber}}</td>
                <td>{{item.eventtypename}}</td>
                <td>{{item.validdatetime}}</td>
                <td style="width:10%"><div class="camera" @click="seeVideo(item.areacode === '01' ? state.video_a_1 : state.video_a_2)"></div></td>
                <td style="width:10%"><div class="tc" @click="seeAbroadcast(item)"><div class="broadcast"></div></div></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="6">
                  <div class="pagination-page">
                    <div class="page-first" @click="toPage(0)"></div>
                    <div class="page-last" @click="toPage(tableConfit.pageNo - 2)"></div>
                    <div class="page-c">
                      <div v-for="(row,index) in pageBottomDatas" :class="{'page-c-item':true,'cur':(row + 1)===tableConfit.pageNo}" @click="toPage(row)">
                        {{ row + 1 }}
                      </div>
                    </div>
                    <div class="page-next" @click="toPage(tableConfit.pageNo)"></div>
                    <div class="page-end" @click="toPage(tableConfit.total - 1)"></div>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
  <video-player ref="vPlayerRef" :video-source="videoSource" :video-title="videoTitle" @closeVideo="closeVideo" v-if="showVideoLayer" style="z-index:9999"></video-player>
  <broadcast-layer v-if="showBroadcastLayer" @closeBroadcastLayer="closeBroadcastLayer"></broadcast-layer>
</template>
<script setup>
import {onMounted,reactive, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import { ajaxRequest } from "../../../api/code.js";
import VideoPlayer from "../videoPlayer2.vue";
import BroadcastLayer from "../broadcastLayer.vue";

  const emit = defineEmits(['closeChild']);
  const closeCurrent = function (){
    emit('closeChild')
  }
const state = reactive({
  video_a_1 : "1",
  video_a_2 : "2"
})

  const tableDatas = ref([]);
  const tableConfit = ref({pageNo:1,pageSize:10,total:100});
  const pageBottomDatas = ref([]);

  async function loadTable(){
    tableDatas.value =
    [
      {id:1,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:2,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:3,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:4,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:5,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:6,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'2跨线停车3'},
      {id:7,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:8,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:9,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      {id:10,platenumber:'粤E12345',yjsj:'60',validdatetime:'2023-01-01 12:00',cs:'40',eventtypename:'跨线停车'},
      ]
    tableDatas.value = []
    const params = {
      eventtype: 95,
      page: tableConfit.value.pageNo,
      limit: tableConfit.value.pageSize
    }
    const res = await ajaxRequest('post', 'getYctcxx', params)
    if (res.data) {
      if(res.data.total){
        //总页数
        tableConfit.value.total = calculateTotalPages(res.data.total,tableConfit.value.pageSize)
      }
      res.data.rows.forEach((item,i)=>{
        let row = {platenumber:item.platenumber,yjsj:item.yjsj,validdatetime:item.validdatetime,cs:item.cs,eventtypename:item.eventtypename,areacode:item.areacode}
        tableDatas.value.push(row)
      })
    }
    pageBottomDatas.value = [];
    let startPage = (tableConfit.value.pageNo < 10)?0:tableConfit.value.pageNo - 5;
    let entPage = startPage + tableConfit.value.pageSize;
    console.log(startPage,entPage)
    if (entPage > tableConfit.value.total) entPage = tableConfit.value.total;
    for (let m = startPage;m < entPage;m++){
      pageBottomDatas.value.push(m);
    }
  }

  const toPage = function (curPage){
    if (curPage < 0) curPage = 0
    else if (curPage > tableConfit.value.total) curPage = tableConfit.value.total
    tableConfit.value.pageNo = curPage + 1;
    loadTable();
  }

  onMounted(()=>{
    loadTable();
    initConfig();
  });


//计算总页数
function calculateTotalPages(totalItems, itemsPerPage) {
    return Math.ceil(totalItems / itemsPerPage);
}

const videoSource = ref("https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4")
const showVideoLayer = ref(false);
const videoTitle = ref("视频监控")
const videoSessionId = ref(null)
const vPlayerRef = ref(null)
const closeVideo = function (){
  if(videoSessionId.value){
    ajaxRequest('post', 'ivmsCloseStream', {sessionid: videoSessionId.value})
  }
  showVideoLayer.value = false;
}

async function seeVideo(chanpubid,title){
  if(!chanpubid){
    return
  }
  const params = {
    chanpubid : chanpubid
  }
  const res = await ajaxRequest('post', 'ivmsRealPlay', params)
  if(res.data && res.data.errcode == 0){
    videoSessionId.value = res.data.SessionId
    videoSource.value = res.data.flvurl
  }
  videoTitle.value = title ? title : '视频监控'
  showVideoLayer.value = true;
}

const showBroadcastLayer = ref(false);
const seeAbroadcast = function (item){
  showBroadcastLayer.value = true;
}
const closeBroadcastLayer = function (){
  showBroadcastLayer.value = false;
}
//刷新数据
const initConfig = () => {
  //从配置文件中加载
  fetch("config/securitySituation/comm.json")
    .then(response => response.json())
    .then(data => {
      state.compflag = data.compflag
      if(process.env.VITE_BASE_URL !='/'){
        const queryParams = new URLSearchParams(window.location); // 解析URL查询参数  
        const ip = queryParams.get('hostname'); // 假设IP地址是通过查询参数传递的  
        // 滦州服务区 13.81.48.242
        // 山海关服务区 13.81.51.242
        // 丰润停车区 13.81.47.242
        // 玉田服务区  13.81.46.242  
        // 迁安停车区  13.81.49.242
        // 卢龙服务区  13.81.50.242
        // 北戴河服务区 13.81.8.242
        if("13.81.48.242" === ip || "fwqzt.hbgs.cloud" === ip){
          state.compflag = "luanzhou"
        }
        else if("13.81.51.242" === ip){
          state.compflag = "shanhaiguan"
        }
        else if("13.81.47.242" === ip){
          state.compflag = "fengrun"
        }
        else if("13.81.46.242" === ip){
          state.compflag = "yutian"
        }
        else if("13.81.49.242" === ip){
          state.compflag = "qianan"
        }
        else if("13.81.50.242" === ip){
          state.compflag = "lulong"
        }
        else if("13.81.8.242" === ip){
          state.compflag = "beidaihe"
        }
      }
      //设置各服务区图片、相机
    
      state.video_a_1 = data['video_a_1_'+state.compflag]
      state.video_a_2 = data['video_a_2_'+state.compflag]
    });
}
</script>

<style scoped>
.dy-panel{
  position: fixed;
  top: 10vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 2vh;
      flex-wrap: wrap;
    }
  }
}
.pd_abItems-contain{
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  .pd_abItems-main{
    display: flex;
    border: 1px solid #FFFFFF;
    margin-right: 2vh;
    .pd_abItem-item{
      padding: 0.5vh 1.2vh;
      border-right: 1px solid #FFFFFF;
      cursor: pointer;
      font-size: 1.4vh;
    }
    .selected{
      background: #35CB9C;
      border: 1px solid #35CB9C;
    }
  }
  .pd-abItem-search{
    margin-left: 1vh;
    .pd-abItem-search-btn{
      border: none;
      background: #35CB9C;
      padding: 0.5vh 1.2vh;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
}
.dy-table{
  width: 100%;
  padding-top: 1.4vh;
}
.pd-table{
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  thead{
    tr{
      background: #1D4F59;
      font-size: 1.6vh;
      th{
        padding: 0.8vh 0;
      }
    }
  }
  tbody td{
    border: 1px solid #1D4F59 ;
    padding: 0.8vh 0;
    font-size: 1.4vh;
  }
}
.pagination-page{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  padding: 1vh;
  .cur{
    border: 1px solid #FFFFFF;
    border-radius: 0.5vh;
  }
  .page-first{
    background: url("../../../assets/img/pageheader/第一页.png") no-repeat;
    width: 18px;
    height: 20px;
    cursor: pointer;
  }
  .page-last{
    background: url("../../../assets/img/pageheader/上一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
  .page-c{
    display: flex;
    .page-c-item{
      margin-left: 1vh;
      cursor: pointer;
      padding: 0 0.4vh;
    }
  }
  .page-next{
    background: url("../../../assets/img/pageheader/下一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
  .page-end{
    background: url("../../../assets/img/pageheader/最后一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 160px;
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

.camera{
  background: url("../../../assets/img/security/相机.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
  margin-left: 25px
}
.broadcast{
  background: url("../../../assets/img/security/广播.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
  margin-left: 25px
}
</style>